<template>
  <div class="container">
    <h1>双向绑定指令</h1><hr>
    <h2>{{ str }}</h2>
    <!-- <input type="text" v-model="str"> -->

    <input type="text" v-model.lazy="uname"><br>
    <input type="text" v-model.number="age"><br>
    <input type="text" v-model.trim="gender"><br>

  </div>
</template>

<script>
export default {
  data() {
    return {
      str: '我是大聪明',
      uname: '小鱼卷',
      age: 18,
      gender: '女'
    };
  }
};
</script>


<style>
h2{
  color: orange;
}
p {
  width: 50px;
  height: 50px;
  color: #a6a1d9;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
  border: 5px solid pink;
  border-radius: 50%;
}
h1 {
  color: #fe7299;
}
img {
  width: 150px;
  height: 150px;
}
input {
  color: #a6a1d9;
}
</style>

